<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- Apple devices fullscreen -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<!-- Apple devices fullscreen -->
	<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

	<title>FLAT - Messages &amp; Chat</title>

	<!-- Bootstrap -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- jQuery UI -->
	<link rel="stylesheet" href="css/plugins/jquery-ui/smoothness/jquery-ui.css">
	<link rel="stylesheet" href="css/plugins/jquery-ui/smoothness/jquery.ui.theme.css">
	<!-- Theme CSS -->
	<link rel="stylesheet" href="css/style.css">
	<!-- Color CSS -->
	<link rel="stylesheet" href="css/themes.css">


	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>

	<!-- Nice Scroll -->
	<script src="js/plugins/nicescroll/jquery.nicescroll.min.js"></script>
	<!-- imagesLoaded -->
	<script src="js/plugins/imagesLoaded/jquery.imagesloaded.min.js"></script>
	<!-- jQuery UI -->
	<script src="js/plugins/jquery-ui/jquery.ui.core.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.widget.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.mouse.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.resizable.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.sortable.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.draggable.min.js"></script>
	<!-- slimScroll -->
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Bootbox -->
	<script src="js/plugins/bootbox/jquery.bootbox.js"></script>
	<!-- Bootbox -->
	<script src="js/plugins/form/jquery.form.min.js"></script>
	<!-- Validation -->
	<script src="js/plugins/validation/jquery.validate.min.js"></script>
	<script src="js/plugins/validation/additional-methods.min.js"></script>

	<!-- Theme framework -->
	<script src="js/eakroko.min.js"></script>
	<!-- Theme scripts -->
	<script src="js/application.min.js"></script>
	<!-- Just for demonstration -->
	<script src="js/demonstration.min.js"></script>

	<!--[if lte IE 9]>
		<script src="js/plugins/placeholder/jquery.placeholder.min.js"></script>
		<script>
			$(document).ready(function() {
				$('input, textarea').placeholder();
			});
		</script>
	<![endif]-->

	<!-- Favicon -->
	<link rel="shortcut icon" href="img/favicon.ico" />
	<!-- Apple devices Homescreen icon -->
	<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />

</head>

<body>
	<div id="navigation">
		<div class="container-fluid">
			<a href="#" id="brand">FLAT</a>
			<a href="#" class="toggle-nav" rel="tooltip" data-placement="bottom" title="Toggle navigation">
				<i class="fa fa-bars"></i>
			</a>
			<ul class='main-nav'>
				<li>
					<a href="index.html">
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Forms</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="forms-basic.html">Basic forms</a>
						</li>
						<li>
							<a href="forms-extended.html">Extended forms</a>
						</li>
						<li>
							<a href="forms-validation.html">Validation</a>
						</li>
						<li>
							<a href="forms-wizard.html">Wizard</a>
						</li>
					</ul>
				</li>
				<li class='active'>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Components</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="components-timeline.html">Timeline</a>
						</li>
						<li>
							<a href="components-pagestatistics.html">Page statistics</a>
						</li>
						<li>
							<a href="components-sidebarwidgets.html">Sidebar widgets</a>
						</li>
						<li class='active'>
							<a href="components-messages.html">Messages &amp; Chat</a>
						</li>
						<li>
							<a href="components-gallery.html">Gallery &amp; Thumbs</a>
						</li>
						<li>
							<a href="components-tiles.html">Tiles</a>
						</li>
						<li>
							<a href="components-icons.html">Icons &amp; Buttons</a>
						</li>
						<li>
							<a href="components-elements.html">UI elements</a>
						</li>
						<li>
							<a href="components-typography.html">Typography</a>
						</li>
						<li>
							<a href="components-bootstrap.html">Bootstrap elements</a>
						</li>
						<li>
							<a href="components-grid.html">Grid</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Tables</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="tables-basic.html">Basic tables</a>
						</li>
						<li>
							<a href="tables-dynamic.html">Dynamic tables</a>
						</li>
						<li>
							<a href="tables-large.html">Large tables</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Plugins</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="plugins-charts.html">Charts</a>
						</li>
						<li>
							<a href="plugins-calendar.html">Calendar</a>
						</li>
						<li>
							<a href="plugins-filemanager.html">File manager</a>
						</li>
						<li>
							<a href="plugins-filetrees.html">File trees</a>
						</li>
						<li>
							<a href="plugins-elements.html">Editable elements</a>
						</li>
						<li>
							<a href="plugins-maps.html">Maps</a>
						</li>
						<li>
							<a href="plugins-dragdrop.html">Drag &amp; Drop widgets</a>
						</li>

					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Pages</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="more-error.html">Error pages</a>
						</li>
						<li class='dropdown-submenu'>
							<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Shop</a>
							<ul class="dropdown-menu">
								<li>
									<a href="more-shop-list.html">List view</a>
								</li>
								<li>
									<a href="more-shop-product.html">Product view</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="more-pricing.html">Pricing tables</a>
						</li>
						<li>
							<a href="more-faq.html">FAQ</a>
						</li>
						<li>
							<a href="more-invoice.html">Invoice</a>
						</li>
						<li>
							<a href="more-userprofile.html">User profile</a>
						</li>
						<li>
							<a href="more-searchresults.html">Search results</a>
						</li>
						<li>
							<a href="more-login.html">Login</a>
						</li>
						<li>
							<a href="more-locked.html">Lock screen</a>
						</li>
						<li>
							<a href="more-email.html">Email templates</a>
						</li>
						<li>
							<a href="more-blank.html">Blank page</a>
						</li>
						<li class='dropdown-submenu'>
							<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Blog</a>
							<ul class="dropdown-menu">
								<li>
									<a href="more-blog-list.html">List big image</a>
								</li>
								<li>
									<a href="more-blog-list-small.html">List small image</a>
								</li>
								<li>
									<a href="more-blog-post.html">Post</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Layouts</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="layouts-sidebar-hidden.html">Default hidden sidebar</a>
						</li>
						<li>
							<a href="layouts-sidebar-right.html">Sidebar right side</a>
						</li>
						<li>
							<a href="layouts-color.html">Different default color</a>
						</li>
						<li>
							<a href="layouts-fixed.html">Fixed layout</a>
						</li>
						<li>
							<a href="layouts-fixed-topside.html">Fixed topbar and sidebar</a>
						</li>
						<li class='dropdown-submenu'>
							<a href="#">Mobile sidebar</a>
							<ul class="dropdown-menu">
								<li>
									<a href="layouts-mobile-slide.html">Slide</a>
								</li>
								<li>
									<a href="layouts-mobile-button.html">Button</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="layouts-footer.html">Footer</a>
						</li>
					</ul>
				</li>
			</ul>
			<div class="user">
				<ul class="icon-nav">
					<li class='dropdown'>
						<a href="#" class='dropdown-toggle' data-toggle="dropdown">
							<i class="fa fa-envelope"></i>
							<span class="label label-lightred">4</span>
						</a>
						<ul class="dropdown-menu pull-right message-ul">
							<li>
								<a href="#">
									<img src="img/demo/user-1.jpg" alt="">
									<div class="details">
										<div class="name">Jane Doe</div>
										<div class="message">
											Lorem ipsum Commodo quis nisi ...
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/demo/user-2.jpg" alt="">
									<div class="details">
										<div class="name">John Doedoe</div>
										<div class="message">
											Ut ad laboris est anim ut ...
										</div>
									</div>
									<div class="count">
										<i class="fa fa-comment"></i>
										<span>3</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/demo/user-3.jpg" alt="">
									<div class="details">
										<div class="name">Bob Doe</div>
										<div class="message">
											Excepteur Duis magna dolor!
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="components-messages.html" class='more-messages'>Go to Message center
									<i class="fa fa-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>

					<li class="dropdown sett">
						<a href="#" class='dropdown-toggle' data-toggle="dropdown">
							<i class="fa fa-cog"></i>
						</a>
						<ul class="dropdown-menu pull-right theme-settings">
							<li>
								<span>Layout-width</span>
								<div class="version-toggle">
									<a href="#" class='set-fixed'>Fixed</a>
									<a href="#" class="active set-fluid">Fluid</a>
								</div>
							</li>
							<li>
								<span>Topbar</span>
								<div class="topbar-toggle">
									<a href="#" class='set-topbar-fixed'>Fixed</a>
									<a href="#" class="active set-topbar-default">Default</a>
								</div>
							</li>
							<li>
								<span>Sidebar</span>
								<div class="sidebar-toggle">
									<a href="#" class='set-sidebar-fixed'>Fixed</a>
									<a href="#" class="active set-sidebar-default">Default</a>
								</div>
							</li>
						</ul>
					</li>
					<li class='dropdown colo'>
						<a href="#" class='dropdown-toggle' data-toggle="dropdown">
							<i class="fa fa-tint"></i>
						</a>
						<ul class="dropdown-menu pull-right theme-colors">
							<li class="subtitle">
								Predefined colors
							</li>
							<li>
								<span class='red'></span>
								<span class='orange'></span>
								<span class='green'></span>
								<span class="brown"></span>
								<span class="blue"></span>
								<span class='lime'></span>
								<span class="teal"></span>
								<span class="purple"></span>
								<span class="pink"></span>
								<span class="magenta"></span>
								<span class="grey"></span>
								<span class="darkblue"></span>
								<span class="lightred"></span>
								<span class="lightgrey"></span>
								<span class="satblue"></span>
								<span class="satgreen"></span>
							</li>
						</ul>
					</li>
					<li class='dropdown language-select'>
						<a href="#" class='dropdown-toggle' data-toggle="dropdown">
							<img src="img/demo/flags/us.gif" alt="">
							<span>US</span>
						</a>
						<ul class="dropdown-menu pull-right">
							<li>
								<a href="#">
									<img src="img/demo/flags/br.gif" alt="">
									<span>Brasil</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/demo/flags/de.gif" alt="">
									<span>Deutschland</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/demo/flags/es.gif" alt="">
									<span>España</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/demo/flags/fr.gif" alt="">
									<span>France</span>
								</a>
							</li>
						</ul>
					</li>
				</ul>
				<div class="dropdown">
					<a href="#" class='dropdown-toggle' data-toggle="dropdown">John Doe
						<img src="img/demo/user-avatar.jpg" alt="">
					</a>
					<ul class="dropdown-menu pull-right">
						<li>
							<a href="more-userprofile.html">Edit profile</a>
						</li>
						<li>
							<a href="#">Account settings</a>
						</li>
						<li>
							<a href="more-login.html">Sign out</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid" id="content">
		<div id="left">
			<form action="search-results.html" method="GET" class='search-form'>
				<div class="search-pane">
					<input type="text" name="search" placeholder="Search here...">
					<button type="submit">
						<i class="fa fa-search"></i>
					</button>
				</div>
			</form>
			<div class="subnav">
				<div class="subnav-title">
					<a href="#" class='toggle-subnav'>
						<i class="fa fa-angle-down"></i>
						<span>Content</span>
					</a>
				</div>
				<ul class="subnav-menu">
					<li class='dropdown'>
						<a href="#" data-toggle="dropdown">Articles</a>
						<ul class="dropdown-menu">
							<li>
								<a href="#">Action #1</a>
							</li>
							<li>
								<a href="#">Antoher Link</a>
							</li>
							<li class='dropdown-submenu'>
								<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Go to level 3</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">This is level 3</a>
									</li>
									<li>
										<a href="#">Unlimited levels</a>
									</li>
									<li>
										<a href="#">Easy to use</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">News</a>
					</li>
					<li>
						<a href="#">Pages</a>
					</li>
					<li>
						<a href="#">Comments</a>
					</li>
				</ul>
			</div>
			<div class="subnav">
				<div class="subnav-title">
					<a href="#" class='toggle-subnav'>
						<i class="fa fa-angle-down"></i>
						<span>Plugins</span>
					</a>
				</div>
				<ul class="subnav-menu">
					<li>
						<a href="#">Cache manager</a>
					</li>
					<li class='dropdown'>
						<a href="#" data-toggle="dropdown">Import manager</a>
						<ul class="dropdown-menu">
							<li>
								<a href="#">Action #1</a>
							</li>
							<li>
								<a href="#">Antoher Link</a>
							</li>
							<li class='dropdown-submenu'>
								<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Go to level 3</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">This is level 3</a>
									</li>
									<li>
										<a href="#">Unlimited levels</a>
									</li>
									<li>
										<a href="#">Easy to use</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Contact form generator</a>
					</li>
					<li>
						<a href="#">SEO optimization</a>
					</li>
				</ul>
			</div>
			<div class="subnav">
				<div class="subnav-title">
					<a href="#" class='toggle-subnav'>
						<i class="fa fa-angle-down"></i>
						<span>Settings</span>
					</a>
				</div>
				<ul class="subnav-menu">
					<li>
						<a href="#">Theme settings</a>
					</li>
					<li class='dropdown'>
						<a href="#" data-toggle="dropdown">Page settings</a>
						<ul class="dropdown-menu">
							<li>
								<a href="#">Action #1</a>
							</li>
							<li>
								<a href="#">Antoher Link</a>
							</li>
							<li class='dropdown-submenu'>
								<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Go to level 3</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">This is level 3</a>
									</li>
									<li>
										<a href="#">Unlimited levels</a>
									</li>
									<li>
										<a href="#">Easy to use</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Security settings</a>
					</li>
				</ul>
			</div>
			<div class="subnav subnav-hidden">
				<div class="subnav-title">
					<a href="#" class='toggle-subnav'>
						<i class="fa fa-angle-right"></i>
						<span>Default hidden</span>
					</a>
				</div>
				<ul class="subnav-menu">
					<li>
						<a href="#">Menu</a>
					</li>
					<li class='dropdown'>
						<a href="#" data-toggle="dropdown">With submenu</a>
						<ul class="dropdown-menu">
							<li>
								<a href="#">Action #1</a>
							</li>
							<li>
								<a href="#">Antoher Link</a>
							</li>
							<li class='dropdown-submenu'>
								<a href="#" data-toggle="dropdown" class='dropdown-toggle'>More stuff</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">This is level 3</a>
									</li>
									<li>
										<a href="#">Easy to use</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Security settings</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="main">
			<div class="container-fluid">
				<div class="page-header">
					<div class="pull-left">
						<h1>Messages &amp; Chat</h1>
					</div>
					<div class="pull-right">
						<ul class="minitiles">
							<li class='grey'>
								<a href="#">
									<i class="fa fa-cogs"></i>
								</a>
							</li>
							<li class='lightgrey'>
								<a href="#">
									<i class="fa fa-globe"></i>
								</a>
							</li>
						</ul>
						<ul class="stats">
							<li class='satgreen'>
								<i class="fa fa-money"></i>
								<div class="details">
									<span class="big">$324,12</span>
									<span>Balance</span>
								</div>
							</li>
							<li class='lightred'>
								<i class="fa fa-calendar"></i>
								<div class="details">
									<span class="big">February 22, 2013</span>
									<span>Wednesday, 13:56</span>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="breadcrumbs">
					<ul>
						<li>
							<a href="more-login.html">Home</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li>
							<a href="components-messages.html">Components</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li>
							<a href="components-messages.html">Messages &amp; Chat</a>
						</li>
					</ul>
					<div class="close-bread">
						<a href="#">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<div class="box">
							<div class="box-title">
								<h3>
									<i class="fa fa-comments"></i>
									Basic conversation
								</h3>
								<div class="actions">
									<a href="#" class="btn btn-mini content-refresh">
										<i class="fa fa-refresh"></i>
									</a>
									<a href="#" class="btn btn-mini content-remove">
										<i class="fa fa-times"></i>
									</a>
									<a href="#" class="btn btn-mini content-slideUp">
										<i class="fa fa-angle-down"></i>
									</a>
								</div>
							</div>
							<div class="box-content nopadding">
								<ul class="messages">
									<li class="left">
										<div class="image">
											<img src="img/demo/user-1.jpg" alt="">
										</div>
										<div class="message">
											<span class="caret"></span>
											<span class="name">Jane Doe</span>
											<p>Lorem ipsum aute ut ullamco et nisi ad.</p>
											<span class="time">
												12 minutes ago
											</span>
										</div>
									</li>
									<li class="right">
										<div class="image">
											<img src="img/demo/user-2.jpg" alt="">
										</div>
										<div class="message">
											<span class="caret"></span>
											<span class="name">John Doe</span>
											<p>Lorem ipsum aute ut ullamco et nisi ad. Lorem ipsum adipisicing nisi Excepteur eiusmod ex culpa laboris. Lorem ipsum est ut...</p>
											<span class="time">
												12 minutes ago
											</span>
										</div>
									</li>
									<li class="left">
										<div class="image">
											<img src="img/demo/user-1.jpg" alt="">
										</div>
										<div class="message">
											<span class="caret"></span>
											<span class="name">Jane Doe</span>
											<p>Lorem ipsum aute ut ullamco et nisi ad. Lorem ipsum adipisicing nisi!</p>
											<span class="time">
												12 minutes ago
											</span>
										</div>
									</li>
									<li class="typing">
										<span class="name">John Doe</span>is typing
										<img src="img/loading.gif" alt="">
									</li>
									<li class="insert">
										<form id="message-form" method="POST" action="#">
											<div class="text">
												<input type="text" name="text" placeholder="Write here..." class="form-control">
											</div>
											<div class="submit">
												<button type="submit">
													<i class="fa fa-share"></i>
												</button>
											</div>
										</form>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<div class="box">
							<div class="box-title">
								<h3>
									<i class="fa fa-comments-o"></i>
									Multi user chat (scrollable)
								</h3>
							</div>
							<div class="box-content nopadding scrollable" data-height="400" data-start="bottom" data-visible="true">
								<ul class="messages withlist">
									<li class="left">
										<div class="image">
											<img src="img/demo/user-1.jpg" alt="">
										</div>
										<div class="message">
											<span class="caret"></span>
											<span class="name">Jane Doe</span>
											<p>Lorem ipsum aute ut ullamco et nisi ad.</p>
											<span class="time">
												12 minutes ago
											</span>
										</div>
									</li>
									<li class="right">
										<div class="image">
											<img src="img/demo/user-2.jpg" alt="">
										</div>
										<div class="message">
											<span class="caret"></span>
											<span class="name">John Doe</span>
											<p>Lorem ipsum aute ut ullamco et nisi ad. Lorem ipsum adipisicing nisi Excepteur eiusmod ex culpa laboris. Lorem ipsum est ut...</p>
											<span class="time">
												12 minutes ago
											</span>
										</div>
									</li>
									<li class="left">
										<div class="image">
											<img src="img/demo/user-3.jpg" alt="">
										</div>
										<div class="message">
											<span class="caret"></span>
											<span class="name">Jane Doe</span>
											<p>Lorem ipsum commodo quis dolor voluptate et in Excepteur. Lorem ipsum amet dolor qui cupidatat in anim reprehenderit quis id culpa consequat non culpa. Lorem ipsum in culpa aliquip incididunt cupidatat dolore irure cupidatat aute cupidatat
												quis nulla.</p>
											<span class="time">
												12 minutes ago
											</span>
										</div>
									</li>
									<li class="left">
										<div class="image">
											<img src="img/demo/user-5.jpg" alt="">
										</div>
										<div class="message">
											<span class="caret"></span>
											<span class="name">Jane Doe</span>
											<p>Lorem ipsum sed culpa in aliquip amet Ut exercitation.</p>
											<span class="time">
												12 minutes ago
											</span>
										</div>
									</li>
									<li class="left">
										<div class="image">
											<img src="img/demo/user-6.jpg" alt="">
										</div>
										<div class="message">
											<span class="caret"></span>
											<span class="name">Jane Doe</span>
											<p>Lorem ipsum labore Excepteur consequat nostrud cillum sed voluptate do fugiat occaecat minim qui qui consequat et fugiat.</p>
											<span class="time">
												12 minutes ago
											</span>
										</div>
									</li>
									<li class="typing">
										<span class="name">John Doe</span>is typing
										<img src="img/loading.gif" alt="">
									</li>
									<li class="insert">
										<form method="POST" action="#" class='form-messages'>
											<div class="text">
												<input type="text" name="text" placeholder="Write here..." class="form-control">
											</div>
											<div class="submit">
												<button type="submit">
													<i class="fa fa-share"></i>
												</button>
											</div>
										</form>
									</li>
								</ul>
								<div class="user-list">
									<h4>Userlist</h4>
									<ul>
										<li>
											<div class="image">
												<img src="img/demo/user-6.jpg" alt="">
											</div>
											<div class="username">
												John Doe
											</div>
										</li>
										<li>
											<div class="image">
												<img src="img/demo/user-5.jpg" alt="">
											</div>
											<div class="username">
												John Doe
											</div>
										</li>
										<li>
											<div class="image">
												<img src="img/demo/user-3.jpg" alt="">
											</div>
											<div class="username">
												John Doe
											</div>
										</li>
										<li>
											<div class="image">
												<img src="img/demo/user-1.jpg" alt="">
											</div>
											<div class="username">
												Jane Doe
											</div>
										</li>
										<li class="invite">
											<a href="#" class='btn btn-block btn-text-left'>
												<i class="fa fa-plus-square"></i>Invite people</a>
											<a href="#" class='btn btn-block btn-text-left btn-danger'>
												<i class="fa fa-sign-out"></i>Leave chat</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<div class="box box-bordered box-color">
							<div class="box-title">
								<h3>
									<i class="fa fa-envelope"></i>
									Message Center
								</h3>
							</div>
							<div class="box-content nopadding">
								<ul class="tabs tabs-inline tabs-left">
									<li class='write hidden-480'>
										<a href="#">Write message</a>
									</li>
									<li class='active'>
										<a href="#inbox" data-toggle="tab">
											<i class="fa fa-inbox"></i>Inbox
											<strong>(3)</strong>
										</a>
									</li>
									<li>
										<a href="#sent" data-toggle="tab">
											<i class="fa fa-share"></i>Sent items</a>
									</li>
									<li>
										<a href="#trash" data-toggle="tab">
											<i class="fa fa-trash-o"></i>Trash</a>
									</li>
								</ul>
								<div class="tab-content tab-content-inline">
									<div class="tab-pane active" id="inbox">
										<div class="highlight-toolbar">
											<div class="pull-left">
												<div class="btn-toolbar">
													<div class="btn-group visible-480">
														<a href="" class="btn btn-danger">New</a>
													</div>
													<div class="btn-group">
														<a href="#" class="btn" rel="tooltip" data-placement="bottom" title="Refresh results">
															<i class="fa fa-refresh"></i>
														</a>
													</div>
													<div class="btn-group hidden-768">
														<div class="dropdown">
															<a href="#" class="btn" data-toggle="dropdown" rel="tooltip" data-placement="bottom" title="Mark elements">
																<i class="fa fa-square-o"></i>
																<span class="caret"></span>
															</a>
															<ul class="dropdown-menu">
																<li>
																	<a href="#" class='sel-all'>All</a>
																</li>
																<li>
																	<a href="#" class='sel-unread'>Unread</a>
																</li>
															</ul>
														</div>
													</div>
													<div class="btn-group">
														<a href="#" class='btn' rel="tooltip" data-placement="bottom" title="Archive">
															<i class="fa fa-inbox"></i>
														</a>
														<a href="#" class='btn' rel="tooltip" data-placement="bottom" title="Mark as spam">
															<i class="fa fa-exclamation-triangle"></i>
														</a>
														<a href="#" class='btn' rel="tooltip" data-placement="bottom" title="Delete">
															<i class="fa fa-trash-o"></i>
														</a>
													</div>
													<div class="btn-group hidden-768">
														<div class="dropdown">
															<a href="#" class="btn" data-toggle="dropdown" rel="tooltip" data-placement="bottom" title="Move to folder">
																<i class="fa fa-folder"></i>
																<span class="caret"></span>
															</a>
															<ul class="dropdown-menu">
																<li>
																	<a href="#">Some folder</a>
																</li>
																<li>
																	<a href="#">Another folder</a>
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
											<div class="pull-right">
												<div class="btn-toolbar">
													<div class="btn-group text hidden-768">
														<span>
															<strong>1-25</strong>of
															<strong>348</strong>
														</span>
													</div>
													<div class="btn-group">
														<a href="#" class="btn">
															<i class="fa fa-angle-left"></i>
														</a>
														<a href="#" class="btn">
															<i class="fa fa-angle-right"></i>
														</a>
													</div>
													<div class="btn-group hidden-768">
														<div class="dropdown">
															<a href="#" class="btn" data-toggle="dropdown">
																<i class="fa fa-cog"></i>
																<span class="caret"></span>
															</a>
															<ul class="dropdown-menu pull-right">
																<li>
																	<a href="#">Settings</a>
																</li>
																<li>
																	<a href="#">Account settings</a>
																</li>
																<li>
																	<a href="#">Email settings</a>
																</li>
																<li>
																	<a href="#">Themes</a>
																</li>
																<li>
																	<a href="#">Help &amp; FAQ</a>
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
										</div>
										<table class="table table-striped table-nomargin table-mail">
											<thead>
												<tr>
													<th class='table-checkbox hidden-480'>
														<input type="checkbox" class='sel-all'>
													</th>
													<th class='table-icon hidden-480'></th>
													<th>Sender</th>
													<th>Subject</th>
													<th class='table-icon hidden-480'></th>
													<th class='table-date hidden-480'>Date</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star active">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Johny Doesy
													</td>
													<td>
														Lorem ipsum sint laborum.
													</td>
													<td class='table-icon hidden-480'>
														<i class="fa fa-paperclip"></i>
													</td>
													<td class='table-date hidden-480'>
														12. Feb
													</td>
												</tr>
												<tr class='unread'>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Lorem ipsum
													</td>
													<td>
														Lorem ipsum veniam esse nisi in ut aliquip do laboris sed pariatur.
													</td>
													<td class='table-icon hidden-480'>
														<i class="fa fa-paperclip"></i>
													</td>
													<td class='table-date hidden-480'>
														11. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Officia In
													</td>
													<td>
														Lorem ipsum dolore do ullamco id ullamco occaecat sed dolore adipisicing officia in cillum ut.
													</td>
													<td class='table-icon hidden-480'>
													</td>
													<td class='table-date hidden-480'>
														10. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Occaecat Tempor
													</td>
													<td>
														Lorem ipsum ut in in eiusmod ut occaecat tempor.
													</td>
													<td class='table-icon hidden-480'>
													</td>
													<td class='table-date hidden-480'>
														9. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Sed Elit
													</td>
													<td>
														Lorem ipsum sed sed elit nisi adipisicing mollit eu adipisicing.
													</td>
													<td class='table-icon hidden-480'>
													</td>
													<td class='table-date hidden-480'>
														8. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star active">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Johny Doesy
													</td>
													<td>
														Lorem ipsum sint laborum.
													</td>
													<td class='table-icon hidden-480'>

													</td>
													<td class='table-date hidden-480'>
														12. Feb
													</td>
												</tr>
												<tr class='unread'>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Lorem ipsum
													</td>
													<td>
														Lorem ipsum veniam esse nisi in ut aliquip do laboris sed pariatur.
													</td>
													<td class='table-icon hidden-480'>

													</td>
													<td class='table-date hidden-480'>
														11. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Officia In
													</td>
													<td>
														Lorem ipsum dolore do ullamco id ullamco occaecat sed dolore adipisicing officia in cillum ut.
													</td>
													<td class='table-icon hidden-480'>

													</td>
													<td class='table-date hidden-480'>
														10. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Occaecat Tempor
													</td>
													<td>
														Lorem ipsum ut in in eiusmod ut occaecat tempor.
													</td>
													<td class='table-icon hidden-480'>
														<i class="fa fa-paperclip"></i>
													</td>
													<td class='table-date hidden-480'>
														9. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Sed Elit
													</td>
													<td>
														Lorem ipsum sed sed elit nisi adipisicing mollit eu adipisicing.
													</td>
													<td class='table-icon hidden-480'>

													</td>
													<td class='table-date hidden-480'>
														8. Feb
													</td>
												</tr>

											</tbody>
										</table>
									</div>
									<div class="tab-pane" id="sent">
										<div class="highlight-toolbar">
											<div class="pull-left">
												<div class="btn-toolbar">
													<div class="btn-group">
														<div class="dropdown hidden-768">
															<a href="#" class="btn" data-toggle="dropdown" rel="tooltip" data-placement="bottom" title="Mark elements">
																<i class="fa fa-square-o"></i>
																<span class="caret"></span>
															</a>
															<ul class="dropdown-menu">
																<li>
																	<a href="#" class='sel-all'>All</a>
																</li>
																<li>
																	<a href="#" class='sel-unread'>Unread</a>
																</li>
															</ul>
														</div>
													</div>
													<div class="btn-group">
														<a href="#" class='btn' rel="tooltip" data-placement="bottom" title="Archive">
															<i class="fa fa-inbox"></i>
														</a>
														<a href="#" class='btn' rel="tooltip" data-placement="bottom" title="Mark as spam">
															<i class="fa fa-exclamation-triangle"></i>
														</a>
														<a href="#" class='btn' rel="tooltip" data-placement="bottom" title="Delete">
															<i class="fa fa-trash-o"></i>
														</a>
													</div>
													<div class="btn-group hidden-768">
														<div class="dropdown">
															<a href="#" class="btn" data-toggle="dropdown" rel="tooltip" data-placement="bottom" title="Move to folder">
																<i class="fa fa-folder"></i>
																<span class="caret"></span>
															</a>
															<ul class="dropdown-menu">
																<li>
																	<a href="#">Some folder</a>
																</li>
																<li>
																	<a href="#">Another folder</a>
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
											<div class="pull-right">
												<div class="btn-toolbar">
													<div class="btn-group text hidden-768">
														<span>
															<strong>1-25</strong>of
															<strong>348</strong>
														</span>
													</div>
													<div class="btn-group">
														<a href="#" class="btn" data-toggle="dropdown">
															<i class="fa fa-angle-left"></i>
														</a>
														<a href="#" class="btn" data-toggle="dropdown">
															<i class="fa fa-angle-right"></i>
														</a>
													</div>
													<div class="btn-group hidden-768">
														<div class="dropdown">
															<a href="#" class="btn" data-toggle="dropdown">
																<i class="fa fa-cog"></i>
																<span class="caret"></span>
															</a>
															<ul class="dropdown-menu pull-right">
																<li>
																	<a href="#">Settings</a>
																</li>
																<li>
																	<a href="#">Account settings</a>
																</li>
																<li>
																	<a href="#">Email settings</a>
																</li>
																<li>
																	<a href="#">Themes</a>
																</li>
																<li>
																	<a href="#">Help &amp; FAQ</a>
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
										</div>
										<table class="table table-striped table-nomargin table-mail">
											<thead>
												<tr>
													<th class='table-checkbox hidden-480'>
														<input type="checkbox" class='sel-all'>
													</th>
													<th class='table-icon hidden-480'></th>
													<th>Sender</th>
													<th>Subject</th>
													<th class='table-icon hidden-480'></th>
													<th class='table-date hidden-480'>Date</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star active">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Johny Doesy
													</td>
													<td>
														Lorem ipsum sint laborum.
													</td>
													<td class='table-icon hidden-480'>
														<i class="fa fa-paperclip"></i>
													</td>
													<td class='table-date hidden-480'>
														12. Feb
													</td>
												</tr>
												<tr class='unread'>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														proident
													</td>
													<td>Lorem ipsum Incididunt consectetur Duis proident laboris nulla cillum dolore elit esse enim tempor veniam.</td>
													<td class='table-icon hidden-480'>
														<i class="fa fa-paperclip"></i>
													</td>
													<td class='table-date hidden-480'>
														11. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														reprehenderit
													</td>
													<td>Lorem ipsum Laborum consequat dolor amet reprehenderit dolor dolor amet.</td>
													<td class='table-icon hidden-480'>
													</td>
													<td class='table-date hidden-480'>
														10. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														eiusmod
													</td>
													<td>
														Lorem ipsum ut in in eiusmod ut occaecat tempor.
													</td>
													<td class='table-icon hidden-480'>
													</td>
													<td class='table-date hidden-480'>
														9. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														occaecat
													</td>
													<td>Lorem ipsum Consequat Duis adipisicing dolor occaecat cillum aliquip adipisicing in cupidatat irure id in.</td>
													<td class='table-icon hidden-480'>
													</td>
													<td class='table-date hidden-480'>
														8. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star active">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														nisi
													</td>
													<td>Lorem ipsum Culpa magna aliqua Duis cillum dolor officia proident.</td>
													<td class='table-icon hidden-480'>

													</td>
													<td class='table-date hidden-480'>
														12. Feb
													</td>
												</tr>
												<tr class='unread'>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														esse
													</td>
													<td>
														Lorem ipsum veniam esse nisi in ut aliquip do laboris sed pariatur.
													</td>
													<td class='table-icon hidden-480'>

													</td>
													<td class='table-date hidden-480'>
														11. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														ipsum
													</td>
													<td>Lorem ipsum Sed sit enim cillum reprehenderit Excepteur pariatur.</td>
													<td class='table-icon hidden-480'>

													</td>
													<td class='table-date hidden-480'>
														10. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														eiusmod
													</td>
													<td>
														Lorem ipsum ut in in eiusmod ut occaecat tempor.
													</td>
													<td class='table-icon hidden-480'>
														<i class="fa fa-paperclip"></i>
													</td>
													<td class='table-date hidden-480'>
														9. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														elit
													</td>
													<td>
														Lorem ipsum sed sed elit nisi adipisicing mollit eu adipisicing.
													</td>
													<td class='table-icon hidden-480'>

													</td>
													<td class='table-date hidden-480'>
														8. Feb
													</td>
												</tr>

											</tbody>
										</table>
									</div>
									<div class="tab-pane" id="trash">
										<div class="highlight-toolbar">
											<div class="pull-left">
												<div class="btn-toolbar">
													<div class="btn-group">
														<a href="#" class='btn' rel="tooltip" data-placement="bottom" title="Undo">
															<i class="fa fa-arrow-left"></i>
														</a>
													</div>
												</div>
											</div>
											<div class="pull-right">
												<div class="btn-toolbar">
													<div class="btn-group text hidden-768">
														<span>
															<strong>1-25</strong>of
															<strong>348</strong>
														</span>
													</div>
													<div class="btn-group">
														<a href="#" class="btn" data-toggle="dropdown">
															<i class="fa fa-angle-left"></i>
														</a>
														<a href="#" class="btn" data-toggle="dropdown">
															<i class="fa fa-angle-right"></i>
														</a>
													</div>
													<div class="btn-group hidden-768">
														<div class="dropdown">
															<a href="#" class="btn" data-toggle="dropdown">
																<i class="fa fa-cog"></i>
																<span class="caret"></span>
															</a>
															<ul class="dropdown-menu pull-right">
																<li>
																	<a href="#">Settings</a>
																</li>
																<li>
																	<a href="#">Account settings</a>
																</li>
																<li>
																	<a href="#">Email settings</a>
																</li>
																<li>
																	<a href="#">Themes</a>
																</li>
																<li>
																	<a href="#">Help &amp; FAQ</a>
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
										</div>
										<table class="table table-striped table-nomargin table-mail">
											<thead>
												<tr>
													<th class='table-checkbox hidden-480'>
														<input type="checkbox" class='sel-all'>
													</th>
													<th class='table-icon hidden-480'></th>
													<th>Sender</th>
													<th>Subject</th>
													<th class='table-icon hidden-480'></th>
													<th class='table-date hidden-480'>Date</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star active">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														veniam
													</td>
													<td>
														Lorem ipsum sint laborum.
													</td>
													<td class='table-icon hidden-480'>
														<i class="fa fa-paperclip"></i>
													</td>
													<td class='table-date hidden-480'>
														12. Feb
													</td>
												</tr>
												<tr class='unread'>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Lorem ipsum
													</td>
													<td>
														Lorem ipsum veniam esse nisi in ut aliquip do laboris sed pariatur.
													</td>
													<td class='table-icon hidden-480'>
														<i class="fa fa-paperclip"></i>
													</td>
													<td class='table-date hidden-480'>
														11. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														commodo
													</td>
													<td>Lorem ipsum In id magna commodo esse do ad esse labore elit.</td>
													<td class='table-icon hidden-480'>
													</td>
													<td class='table-date hidden-480'>
														10. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														tempor
													</td>
													<td>
														Lorem ipsum ut in in eiusmod ut occaecat tempor.
													</td>
													<td class='table-icon hidden-480'>
													</td>
													<td class='table-date hidden-480'>
														9. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														mollit
													</td>
													<td>
														Lorem ipsum sed sed elit nisi adipisicing mollit eu adipisicing.
													</td>
													<td class='table-icon hidden-480'>
													</td>
													<td class='table-date hidden-480'>
														8. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star active">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														adipisicing
													</td>
													<td>Lorem ipsum Magna sunt mollit adipisicing est elit veniam nostrud.</td>
													<td class='table-icon hidden-480'>

													</td>
													<td class='table-date hidden-480'>
														12. Feb
													</td>
												</tr>
												<tr class='unread'>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														cillum ut
													</td>
													<td>Lorem ipsum Sunt qui quis laboris aliquip officia sed et.</td>
													<td class='table-icon hidden-480'>

													</td>
													<td class='table-date hidden-480'>
														11. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														veniam incididunt
													</td>
													<td>
														Lorem ipsum dolore do ullamco id ullamco occaecat sed dolore adipisicing officia in cillum ut.
													</td>
													<td class='table-icon hidden-480'>

													</td>
													<td class='table-date hidden-480'>
														10. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Sed Laborum
													</td>
													<td>
														Lorem ipsum ut in in eiusmod ut occaecat tempor.
													</td>
													<td class='table-icon hidden-480'>
														<i class="fa fa-paperclip"></i>
													</td>
													<td class='table-date hidden-480'>
														9. Feb
													</td>
												</tr>
												<tr>
													<td class='table-checkbox hidden-480'>
														<input type="checkbox" class='selectable'>
													</td>
													<td class='table-icon hidden-480'>
														<a href="#" class="sel-star">
															<i class="fa fa-star"></i>
														</a>
													</td>
													<td class='table-fixed-medium'>
														Duis amet
													</td>
													<td>Lorem ipsum Duis amet sed laborum veniam incididunt occaecat.</td>
													<td class='table-icon hidden-480'>

													</td>
													<td class='table-date hidden-480'>
														8. Feb
													</td>
												</tr>

											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
